<template>
  <div class="main">
    <div class="box">
      <div class="item" style="--i: 0">
        <img src="./1.png" style="width: 100%; height: 100%" alt="" />
      </div>
      <div class="item" style="--i: 1">
        <img src="./1.png" style="width: 100%; height: 100%" alt="" />
      </div>
      <div class="item" style="--i: 2">
        <img src="./1.png" style="width: 100%; height: 100%" alt="" />
      </div>
      <div class="item" style="--i: 3">
        <img src="./1.png" style="width: 100%; height: 100%" alt="" />
      </div>
      <div class="item" style="--i: 4">
        <img src="./1.png" style="width: 100%; height: 100%" alt="" />
      </div>
      <div class="item" style="--i: 5">
        <img src="./1.png" style="width: 100%; height: 100%" alt="" />
      </div>
      <div class="item" style="--i: 6">
        <img src="./1.png" style="width: 100%; height: 100%" alt="" />
      </div>
      <div class="item" style="--i: 7">
        <img src="./1.png" style="width: 100%; height: 100%" alt="" />
      </div>
      <div class="item" style="--i: 8">
        <img src="./1.png" style="width: 100%; height: 100%" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 600px;
  height: 400px;
  margin: 50px auto;
  perspective: 800px;
  transform-style: preserve-3d;
  .box {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: move 5s ease infinite;
    &:hover {
      animation-play-state: paused;
    }
    .item {
      width: 200px;
      height: 200px;
      background-color: #ff00ff;
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -100px;
      transform: rotateY(calc(var(--i) * 40deg)) translateZ(300px);
      // &:nth-child(1) {
      //   transform: rotateY(0deg) translateZ(300px);
      // }
      // &:nth-child(2) {
      // }
      // &:nth-child(3) {
      //   transform: rotateY(80deg) translateZ(300px);
      // }

      // &:nth-child(4) {
      //   transform: rotateY(120deg) translateZ(300px);
      // }
      // &:nth-child(5) {
      //   transform: rotateY(160deg) translateZ(300px);
      // }
      // &:nth-child(6) {
      //   transform: rotateY(200deg) translateZ(300px);
      // }

      // &:nth-child(7) {
      //   transform: rotateY(240deg) translateZ(300px);
      // }
      // &:nth-child(8) {
      //   transform: rotateY(280deg) translateZ(300px);
      // }
      // &:nth-child(9) {
      //   transform: rotateY(320deg) translateZ(300px);
      // }
    }
  }
  @keyframes move {
    0% {
      transform: rotateX(-15deg) rotateY(0);
    }
    100% {
      transform: rotateX(-15deg) rotateY(300deg);
    }
  }
}
</style>  